<template>
  <view class="tab-page group">

    <view class="nav-bar">
      <uni-icons class="btn-side left" type="more-filled" size="30" @click="onShowMore()"></uni-icons>
      <view class="nav-search">
        {{ this.circleStore.currentOpenCircle.name }}
      </view>
      <view class="nav-add" @click="onCreateNewMoment()">
        <uni-icons type="personadd" size="30"></uni-icons>
      </view>
    </view>

    <view class="group-tip" v-if="momentList.length==0">
      温馨提示：该圈子还没有任何动态，点击右上方'+'按钮可以发布动态哦~
    </view>

    <view class="group-items" v-else>
      <scroll-view class="scroll-bar" @scrolltolower="loadMore" scroll-with-animation="true" scroll-y="true">
        <moment-list-item :moment="momentList"></moment-list-item>
      </scroll-view>
    </view>
  </view>
</template>

<script>

import MomentListItem from "../../components/moment-list-item/moment-list-item.vue";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

export default {
  components: {UniIcons, MomentListItem},
  data() {
    return {
      momentList: [],
      queryParams: {
        circleId: this.$route.query.circleId,
        refreshing: false,
        status: 'more',
        page: 1,
        size: 10
      },
      canLoadMore: true,
    }
  },
  methods: {
    onShowMore() {
      uni.navigateTo({
        url: "/pages/circle/circle-info?id=" + this.queryParams.circleId
      })
    },
    onCreateNewMoment() {
      uni.redirectTo({
        url: "/pages/moment/moment-add?circleId=" + this.queryParams.circleId
      })
    },

    getList() {
      this.queryParams.status = 'loading'
      this.$http({
        url: '/moment/list',
        method: 'GET',
        data: this.queryParams
      }).then((res) => {
        this.momentList = res.list
      })
    },
    loadMore() {
      if (!this.canLoadMore) {
        return
      }
      this.canLoadMore = false
      this.queryParams.page++
      this.queryParams.status = 'loading'
      this.$http({
        url: '/moment/list',
        method: 'GET',
        data: this.queryParams
      }).then((res) => {
        this.momentList = this.momentList.concat(res.list)
        console.log(res.hasNextPage)
        if (res.hasNextPage) {
          this.canLoadMore = true
        } else {
          uni.showToast({
            title: `没有更多了`,
            icon: 'none',
            duration: 1500
          });
        }
      })

    },
  },

  onLoad() {
    this.getList();
  },

}
</script>

<style lang="scss" scoped>

.btn-side {
  position: absolute;
  line-height: 60rpx;
  font-size: 28rpx;
  cursor: pointer;

  &.left {
    left: 30rpx;
  }

  &.right {
    right: 30rpx;
  }
}

.group {
  position: relative;
  border: #dddddd solid 1px;
  display: flex;
  flex-direction: column;

  .nav-bar {
    margin: 5rpx;
    display: flex;
    align-items: center;
    background-color: white;
  }

  .nav-search {
    flex: 1;
    display: flex; /* 让 .nav-search 也成为一个 flex 容器 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
  }

  .nav-add {
    padding-right: 20rpx;
    line-height: 36px;
    cursor: pointer;
  }

  .group-tip {
    position: absolute;
    top: 400rpx;
    padding: 50rpx;
    text-align: left;
    line-height: 50rpx;
    color: #10AEFF;
    font-size: 30rpx;
  }

  .group-items {
    flex: 1;
    padding: 0;
    border: #dddddd solid 1px;
    overflow: hidden;
    position: relative;

    .scroll-bar {
      height: 100%;
    }
  }
}
</style>